<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录与注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        /* 背景装饰圆圈 */
        .bg-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            filter: blur(50px);
            z-index: -1;
        }

        .circle-1 {
            width: 300px;
            height: 300px;
            top: -50px;
            left: -50px;
            background: rgba(100, 149, 237, 0.3);
        }

        .circle-2 {
            width: 400px;
            height: 400px;
            bottom: -100px;
            right: -100px;
            background: rgba(255, 182, 193, 0.3);
        }

        .circle-3 {
            width: 200px;
            height: 200px;
            top: 50%;
            right: 20%;
            background: rgba(152, 251, 152, 0.3);
        }

        /* 主容器 */
        .auth-container {
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            width: 900px;
            height: 600px;
            display: flex;
            overflow: hidden;
            position: relative;
        }

        /* 左右面板通用样式 */
        .auth-panel {
            width: 50%;
            padding: 60px;
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 0;
            height: 100%;
            transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
        }

        /* 登录面板 */
        .login-panel {
            left: 0;
        }

        /* 激活状态的面板 */
        .auth-panel.active {
            transform: translateX(0);
            opacity: 1;
        }

        /* 标题样式 */
        .auth-header {
            margin-bottom: 30px;
        }

        .auth-header h1 {
            color: #333;
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .auth-header p {
            color: #666;
            font-size: 14px;
        }

        /* 表单组 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            border-color: #4361ee;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            outline: none;
        }

        /* 表单选项 */
        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .remember-me {
            display: flex;
            align-items: center;
            color: #666;
            cursor: pointer;
        }

        .remember-me input {
            margin-right: 5px;
        }

        .auth-link {
            color: #666;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .auth-link:hover {
            color: #4361ee;
        }

        /* 按钮样式 */
        .auth-btn {
            width: 100%;
            padding: 12px;
            background-color: #4361ee;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .auth-btn:hover {
            background-color: #3a56d4;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
        }

        /* 第三方登录 */
        .social-login {
            margin-top: 20px;
        }

        .divider {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: #999;
            font-size: 14px;
        }

        .divider::before, .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background-color: #eee;
        }

        .divider span {
            padding: 0 15px;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .social-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .social-icon i {
            font-size: 20px;
            color: #666;
            transition: all 0.3s ease;
        }

        .social-icon:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .social-icon[data-platform="wechat"]:hover {
            background-color: #07C160;
        }

        .social-icon[data-platform="qq"]:hover {
            background-color: #12B7F5;
        }

        .social-icon[data-platform="weibo"]:hover {
            background-color: #E6162D;
        }

        .social-icon[data-platform="github"]:hover {
            background-color: #333;
        }

        .social-icon:hover i {
            color: white;
        }

        /* 二维码区域 */
        .qr-section {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
            background-color: #f9fafc;
            position: relative;
            overflow: hidden;
        }

        .qr-content {
            text-align: center;
            width: 100%;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
            position: absolute;
        }

        .qr-content.active {
            opacity: 1;
            transform: translateY(0);
        }

        .qr-content h2 {
            margin-bottom: 20px;
            color: #333;
            font-size: 22px;
        }

        /* 二维码加载动画样式 */
        .qr-loader {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(67, 97, 238, 0.2);
            border-top-color: #4361ee;
            border-radius: 50%;
            margin: 20px auto;
        }

        /* 二维码占位符 */
        .qr-code-placeholder {
            width: 200px;
            height: 200px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            overflow: hidden;
        }

        .qr-content p {
            color: #666;
            margin-bottom: 15px;
        }

        .qr-content p span {
            color: #4361ee;
            font-weight: 500;
        }

        .qr-tips {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 13px;
        }

        .qr-tips i {
            margin-right: 5px;
            font-size: 14px;
            color: #FFA500;
        }

        /* Toast消息样式 */
        .toast-message {
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 14px;
            z-index: 1000;
            pointer-events: none;
        }
    </style>
</head>
<body>
<!-- 背景装饰元素 -->
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
<div class="bg-circle circle-3"></div>

<!-- 主容器 -->
<div class="auth-container">
    <!-- 左侧表单区域 -->
    <div class="form-section" style="width: 50%;">
        <!-- 登录面板 -->
        <div class="auth-panel login-panel active">
            <div class="auth-header">
                <h1>欢迎回来</h1>
                <p>请输入您的凭据以登录您的帐户</p>
            </div>

            <form class="auth-form">
                <div class="form-group">
                    <label for="login-email">电子邮箱</label>
                    <input type="email" id="login-email" placeholder="请输入您的邮箱地址" required>
                </div>

                <div class="form-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" placeholder="请输入您的密码" required>
                </div>

                <div class="form-options">
                    <label class="remember-me">
                        <input type="checkbox"> 记住我
                    </label>
                    <a href="#" class="auth-link">忘记密码?</a>
                </div>

                <button type="submit" class="auth-btn">登录</button>
            </form>

            <!-- 第三方登录 -->
            <div class="social-login">
                <div class="divider">
                    <span>或使用以下方式登录</span>
                </div>
                <div class="social-icons">
                    <div class="social-icon" data-platform="wechat">
                        <i class="fab fa-weixin"></i>
                    </div>
                    <div class="social-icon" data-platform="qq">
                        <i class="fab fa-qq"></i>
                    </div>
                    <div class="social-icon" data-platform="weibo">
                        <i class="fab fa-weibo"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧二维码区域 -->
    <div class="qr-section">
        <!-- 初始状态显示提示 -->
        <div class="qr-content" id="qr-default">
            <h2>扫码登录</h2>
            <div class="qr-code-placeholder">
                <i class="fas fa-qrcode" style="font-size: 60px; color: #ddd;"></i>
            </div>
            <p>请选择左侧的第三方登录方式</p>
            <div class="qr-tips">
                <i class="fas fa-lightbulb"></i>
                <span>二维码有效期为5分钟，请尽快扫码</span>
            </div>
        </div>

        <!-- 微信二维码 -->
        <div class="qr-content" id="qr-wechat">
            <h2>微信扫码登录</h2>
            <div class="qr-code-placeholder" id="wechat-qr-code"></div>
            <p>请使用 <span>微信</span> 扫描二维码登录</p>
            <div class="qr-tips">
                <i class="fas fa-lightbulb"></i>
                <span>二维码有效期为5分钟，请尽快扫码</span>
            </div>
        </div>

        <!-- QQ二维码 -->
        <div class="qr-content" id="qr-qq">
            <h2>QQ扫码登录</h2>
            <div class="qr-code-placeholder" id="qq-qr-code"></div>
            <p>请使用 <span>QQ</span> 扫描二维码登录</p>
            <div class="qr-tips">
                <i class="fas fa-lightbulb"></i>
                <span>二维码有效期为5分钟，请尽快扫码</span>
            </div>
        </div>

        <!-- 微博二维码 -->
        <div class="qr-content" id="qr-weibo">
            <h2>微博扫码登录</h2>
            <div class="qr-code-placeholder" id="weibo-qr-code"></div>
            <p>请使用 <span>微博</span> 扫描二维码登录</p>
            <div class="qr-tips">
                <i class="fas fa-lightbulb"></i>
                <span>二维码有效期为5分钟，请尽快扫码</span>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化GSAP动画 - 页面加载动画
        gsap.from('.auth-container', {
            duration: 0.8,
            y: 50,
            opacity: 0,
            ease: 'back.out(1.2)'
        });

        gsap.from('.bg-circle', {
            duration: 1.5,
            scale: 0,
            opacity: 0,
            stagger: 0.2,
            ease: 'elastic.out(1, 0.5)'
        });

        // 获取DOM元素
        const socialIcons = document.querySelectorAll('.social-icon');
        const qrContents = document.querySelectorAll('.qr-content');

        // 显示默认二维码提示
        showQrContent('qr-default');


        // 第三方登录图标点击事件
        socialIcons.forEach(icon => {
            icon.addEventListener('click', function() {
                const platform = this.getAttribute('data-platform');

                // 显示对应的二维码
                showQrContent(`qr-${platform}`);

                // 模拟生成二维码
                simulateQrCodeLoading(platform);
            });
        });

        // 显示指定的二维码内容
        function showQrContent(id) {
            qrContents.forEach(content => {
                if (content.id === id) {
                    content.classList.add('active');
                    gsap.fromTo(content,
                        { opacity: 0, y: 20 },
                        { opacity: 1, y: 0, duration: 0.5 }
                    );
                } else {
                    content.classList.remove('active');
                    gsap.to(content, { opacity: 0, duration: 0.3 });
                }
            });
        }

        // 模拟二维码加载效果
        function simulateQrCodeLoading(platform) {
            const qrPlaceholder = document.getElementById(`${platform}-qr-code`);

            // 清空占位符
            qrPlaceholder.innerHTML = '';

            // 添加加载动画
            const loader = document.createElement('div');
            loader.className = 'qr-loader';
            qrPlaceholder.appendChild(loader);

            // 使用GSAP创建加载动画
            gsap.to(loader, {
                rotation: 360,
                duration: 1.5,
                repeat: -1,
                ease: "linear"
            });

            // 模拟加载延迟
            setTimeout(() => {
                // 移除加载动画
                qrPlaceholder.removeChild(loader);

                // 添加生成的二维码（这里使用SVG模拟）
                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svg.setAttribute("viewBox", "0 0 100 100");
                svg.style.width = "100%";
                svg.style.height = "100%";

                // 创建二维码图案（简化版）
                for (let i = 0; i < 100; i += 10) {
                    for (let j = 0; j < 100; j += 10) {
                        if (Math.random() > 0.3) {
                            const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                            rect.setAttribute("x", i);
                            rect.setAttribute("y", j);
                            rect.setAttribute("width", "8");
                            rect.setAttribute("height", "8");
                            rect.setAttribute("fill", "#333");
                            svg.appendChild(rect);
                        }
                    }
                }

                // 添加定位标记
                addQrMarker(svg, 5, 5);
                addQrMarker(svg, 65, 5);
                addQrMarker(svg, 5, 65);

                qrPlaceholder.appendChild(svg);

                // 二维码出现动画
                gsap.from(svg, {
                    scale: 0.5,
                    opacity: 0,
                    duration: 0.5,
                    ease: "back.out(1.7)"
                });

                // 显示成功提示
                showToast(`${platform === 'wechat' ? '微信' : platform === 'qq' ? 'QQ' : '微博'}二维码已生成`);
            }, 1500);
        }

        // 添加二维码定位标记
        function addQrMarker(svg, x, y) {
            // 外框
            const outer = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            outer.setAttribute("x", x);
            outer.setAttribute("y", y);
            outer.setAttribute("width", "20");
            outer.setAttribute("height", "20");
            outer.setAttribute("fill", "none");
            outer.setAttribute("stroke", "#333");
            outer.setAttribute("stroke-width", "2");
            svg.appendChild(outer);

            // 内框
            const inner = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            inner.setAttribute("x", x + 5);
            inner.setAttribute("y", y + 5);
            inner.setAttribute("width", "10");
            inner.setAttribute("height", "10");
            inner.setAttribute("fill", "#333");
            svg.appendChild(inner);
        }

        // 表单提交
        const forms = document.querySelectorAll('.auth-form');
        forms.forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                if (form.parentElement.classList.contains('login-panel')) {
                    // 登录表单提交
                    simulateLoginSuccess();
                }
            });
        });

        // 模拟登录成功
        function simulateLoginSuccess() {
            gsap.to('.auth-container', {
                y: -50,
                opacity: 0,
                duration: 0.5,
                ease: 'power2.in',
                onComplete: () => {
                    showToast('登录成功，正在跳转...');
                    // 实际应用中这里会是页面跳转
                    setTimeout(() => {
                        gsap.fromTo('.auth-container',
                            { y: 50, opacity: 0 },
                            { y: 0, opacity: 1, duration: 0.5, ease: 'power2.out' }
                        );
                    }, 2000);
                }
            });
        }

        // 显示Toast提示
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast-message';
            toast.textContent = message;
            document.body.appendChild(toast);

            gsap.fromTo(toast,
                { y: 50, opacity: 0 },
                {
                    y: 0,
                    opacity: 1,
                    duration: 0.3,
                    onComplete: () => {
                        setTimeout(() => {
                            gsap.to(toast, {
                                y: -20,
                                opacity: 0,
                                duration: 0.3,
                                onComplete: () => toast.remove()
                            });
                        }, 2000);
                    }
                }
            );
        }
    });
</script>
</body>
</html>